<template>
  <div class="app-container customer-div">
      <div style="margin-bottom:20px;">
          <div style="font-size:26px;font-weight:bold;line-height: 40px;">{{info.activityName}}</div>
          <div style="overflow: hidden;font-size:12px;line-height: 24px;color:#888">
              <div style="display: inline-block;margin-right:30px">投票截止日期：{{info.evaluateEndTime}}</div>
              <div style="display: inline-block;margin-right:30px">创建日期：{{info.createTime}}</div>
              <div style="display: inline-block;margin-right:30px">模版名称：{{info.templateName}}</div>
              <div style="display: inline-block">状态：{{info.activityState}}</div>
          </div>
      </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="投票明细" name="second">
            <div>
                <el-alert
                        title="员工自评完成后，生成投票记录，投票时间开始后，投票人才可以投票"
                        type="warning"
                        :closable="false">
                </el-alert>
            </div>
            <div style="margin-top: 20px">
                <!--搜索-->
                <el-form :inline="true" :model="listQuery2" size="mini" label-width="100px">
<!--                    <el-form-item label="部门：">-->
<!--                        <el-cascader-->
<!--                                v-model="listQuery2.departmentId"-->
<!--                                :options="data2"-->
<!--                                :props="{ checkStrictly: true,value:'departmentId',label:'departmentName',emitPath:false}"-->
<!--                                clearable>-->
<!--                        </el-cascader>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="被投人：">-->
<!--                        <el-select v-model="listQuery2.userId" filterable placeholder="请选择" clearable>-->
<!--                            <el-option-->
<!--                                    v-for="item in userOptionList"-->
<!--                                    :key="item.userId"-->
<!--                                    :label="item.realName"-->
<!--                                    :value="item.userId">-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
                    <el-form-item label="被投人：">
                        <el-cascader
                                :show-all-levels="false"
                                collapse-tags
                                v-model="listQuery2.userId"
                                :options="data2"
                                :props="{ value:'id',label:'name',multiple: true,emitPath:false}"
                                clearable>
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="状态：">
                        <el-select v-model="listQuery2.evaluateState" clearable>
                            <el-option
                                    v-for="item in typeList2"
                                    :key="item.code"
                                    :label="item.name"
                                    :value="item.code">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                                @click="handleSearchList2()"
                                type="primary">
                            查询
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!--数据列表-->
            <div class="table-container">
                <el-table
                        v-loading="loading2"
                        :data="list2"
                        border
                        style="width: 100%; margin-top: 20px">
                    <el-table-column
                            prop="activityName"
                            label="投票活动名称"
                            align="center"
                            min-width="150">
                    </el-table-column>
                    <el-table-column
                            prop="departName"
                            label="部门"
                            align="center"
                            min-width="100">
                    </el-table-column>
                    <!--<el-table-column-->
                            <!--label="评分类型"-->
                            <!--align="center"-->
                            <!--min-width="100">-->
                        <!--<template slot-scope="scope">{{scope.row.isDepartManage == 0 ? '员工' : '部门负责人'}}</template>-->
                    <!--</el-table-column>-->
                    <el-table-column
                            label="被投人"
                            align="center"
                            min-width="100">
                        <template slot-scope="scope">{{scope.row.userRealName}}</template>
                    </el-table-column>

                    <el-table-column
                            align="center"
                            prop="operateSource"
                            label="投票时间"
                            min-width="150">
                        <template slot-scope="scope">{{scope.row.evaluateTime }}</template>
                    </el-table-column>
                    <!--<el-table-column-->
                            <!--label="投票人"-->
                            <!--min-width="100"-->
                            <!--align="center">-->
                        <!--<template slot-scope="scope">-->
                            <!--{{scope.row.evaluatorName }}-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="关系"-->
                            <!--min-width="100"-->
                            <!--align="center">-->
                        <!--<template slot-scope="scope">-->
                            <!--{{scope.row.userType }}-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <el-table-column
                            label="投票状态"
                            min-width="100"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.evaluateState }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="百分制分数"
                            min-width="100"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.evaluateScores }}
                        </template>
                    </el-table-column>
                    <!--<el-table-column-->
                            <!--fixed="right"-->
                            <!--label="操作"-->
                            <!--min-width="100"-->
                            <!--align="center">-->
                        <!--<template slot-scope="scope">-->
                            <!--<el-button type="text" @click="toStaffAct(scope.row)">查看</el-button>-->
                        <!--</template>-->
                    <!--</el-table-column>-->

                </el-table>
            </div>
            <div class="pagination-container">
                <el-pagination
                        background
                        @size-change="handleSizeChange2"
                        @current-change="handleCurrentChange2"
                        layout="total, sizes,prev, pager, next,jumper"
                        :current-page.sync="listQuery2.pageNum"
                        :page-size="listQuery2.pageSize"
                        :page-sizes="[10,15,20]"
                        :total="count2">
                </el-pagination>
            </div>

        </el-tab-pane>
        <el-tab-pane label="投票统计" name="third">
            <div style="margin-top: 20px">
                <!--搜索-->
                <el-form :inline="true" :model="listQuery3" size="mini" label-width="100px">
<!--                    <el-form-item label="部门：">-->
<!--                        <el-cascader-->
<!--                                v-model="listQuery3.departmentId"-->
<!--                                :options="data2"-->
<!--                                :props="{ checkStrictly: true,value:'departmentId',label:'departmentName',emitPath:false}"-->
<!--                                clearable>-->
<!--                        </el-cascader>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="被投人：">-->
<!--                        <el-select v-model="listQuery3.userId" filterable placeholder="请选择" clearable>-->
<!--                            <el-option-->
<!--                                    v-for="item in userOptionList"-->
<!--                                    :key="item.userId"-->
<!--                                    :label="item.realName"-->
<!--                                    :value="item.userId">-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
                    <el-form-item label="被投人：">
                        <el-cascader
                                :show-all-levels="false"
                                collapse-tags
                                v-model="listQuery3.userId"
                                :options="data2"
                                :props="{ value:'id',label:'name',multiple: true,emitPath:false}"
                                clearable>
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="评分类型：">
                        <el-select v-model="listQuery3.isDepartManage" clearable>
                            <el-option
                                    :key="0"
                                    label="员工"
                                    :value="0">
                            </el-option>
                            <el-option
                                    :key="1"
                                    label="部门负责人"
                                    :value="1">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否写自评：">
                        <el-select v-model="listQuery3.isHasSelfInput" clearable>
                            <el-option
                                    :key="0"
                                    label="否"
                                    :value="0">
                            </el-option>
                            <el-option
                                    :key="1"
                                    label="是"
                                    :value="1">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                                @click="handleSearchList3()"
                                type="primary">
                            查询
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!--数据列表-->
            <div class="table-container">
                <el-table
                        v-loading="loading3"
                        :data="list3"
                        border
                        style="width: 100%; margin-top: 20px">
                    <el-table-column
                            prop="activityName"
                            label="投票活动名称"
                            align="center"
                            min-width="150">
                    </el-table-column>
                    <el-table-column
                            prop="departName"
                            label="部门"
                            align="center"
                            min-width="100">
                    </el-table-column>
                    <el-table-column
                            label="评分类型"
                            align="center"
                            min-width="100">
                        <template slot-scope="scope">{{scope.row.isDepartManage == 0 ? '员工' : '部门负责人'}}</template>
                    </el-table-column>
                    <el-table-column
                            label="被投人"
                            align="center"
                            min-width="100">
                        <template slot-scope="scope">{{scope.row.userRealName}}</template>
                    </el-table-column>

                    <!--<el-table-column-->
                            <!--align="center"-->
                            <!--prop="operateSource"-->
                            <!--label="自评截止时间"-->
                            <!--min-width="100">-->
                        <!--<template slot-scope="scope">-->
                            <!--{{scope.row.selfEndTime}}-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="投票截止时间"-->
                            <!--min-width="100"-->
                            <!--align="center">-->
                        <!--<template slot-scope="scope">-->
                            <!--{{scope.row.evaluateEndTime}}-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <el-table-column
                            label="状态"
                            min-width="100"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.evaluateState }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="投票人数"
                            min-width="100"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.evaluateNum }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="实际投票人数"
                            min-width="100"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.actualEvaluateNum }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="弃权人数"
                            min-width="100"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.abstainNum }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="未投人数"
                            min-width="100"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.unEvaluateNum}}
                        </template>
                    </el-table-column>
                    <!--<el-table-column-->
                            <!--label="投票总评分数"-->
                            <!--min-width="100"-->
                            <!--align="center">-->
                        <!--<template slot-scope="scope">-->
                            <!--{{scope.row.allScore }}-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="最高分"-->
                            <!--min-width="100"-->
                            <!--align="center">-->
                        <!--<template slot-scope="scope">-->
                            <!--{{scope.row.maxScore }}-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="最低分"-->
                            <!--min-width="100"-->
                            <!--align="center">-->
                        <!--<template slot-scope="scope">-->
                            <!--{{scope.row.minScore }}-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <el-table-column
                            label="最终得分"
                            min-width="100"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.actualScore }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            min-width="150"
                            align="center">
                        <template slot-scope="scope">
                            <el-button type="text" @click="seeZp(scope.row)">自评</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-container">
                <el-pagination
                        background
                        @size-change="handleSizeChange3"
                        @current-change="handleCurrentChange3"
                        layout="total, sizes,prev, pager, next,jumper"
                        :current-page.sync="listQuery3.pageNum"
                        :page-size="listQuery3.pageSize"
                        :page-sizes="[10,15,20]"
                        :total="count3">
                </el-pagination>
            </div>
        </el-tab-pane>
        <el-tab-pane label="投票报表" name="four">
            <div>
                <el-button
                        :loading="btnloading"
                        @click="downloadExcel()"
                        type="primary"
                        size="small">
                    导出
                </el-button>
            </div>
            <!--数据列表-->
            <div class="table-container">
                <el-table
                        v-loading="loading4"
                        :data="list4"
                        border
                        style="width: 100%; margin-top: 20px">
                    <el-table-column
                            prop="departName"
                            label="部门"
                            align="center"
                            min-width="100">
                    </el-table-column>
                    <el-table-column
                            prop="realName"
                            label="姓名"
                            align="center"
                            min-width="100">
                    </el-table-column>
                    <el-table-column
                            label="应投人数"
                            align="center"
                            min-width="100">
                        <template slot-scope="scope">{{scope.row.allEvaluateNum}}</template>
                    </el-table-column>
                    <el-table-column
                            label="已投人数"
                            align="center"
                            min-width="100">
                        <template slot-scope="scope">{{scope.row.hasEvaluateNum}}</template>
                    </el-table-column>
                    <el-table-column
                            label="弃投人数"
                            min-width="100"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.abstainNum }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="未投人数"
                            min-width="100"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.unEvaluateNum }}
                        </template>
                    </el-table-column>

                </el-table>
            </div>
        </el-tab-pane>
    </el-tabs>

   <!--自评-->
   <el-dialog
              :close-on-click-modal="false"
              title="自评"
              :visible.sync="dialogVisible"
              width="600px">
          <el-form  size="mini" label-width="140px" >
              <el-form-item :label="item.itemName" v-for="item in form.itemList" :key="item.itemId" >
                  <div v-html="item.evaluateContent"></div>
              </el-form-item>
              <el-form-item label="操作记录：">
                  <el-timeline-item
                          v-for="(activity, index) in form.logList"
                          :key="index" style="list-style:none">
                             <div>
                                 <div style="padding-right:10px;">{{activity.logTime}}</div>
                                 <div v-html="activity.logContent"></div>
                             </div>
                  </el-timeline-item>
              </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose" size="small">关 闭</el-button>
          </span>
      </el-dialog>
  </div>
</template>

<script>
    import {activityInfo,activityEvaluator,evaluateAnalysis,getUserOption,selfEvaluateInfo,listByDept,evaluateSummary} from '@/api/partner'
    import {getDeptList} from '@/api/management'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'
    const defaultListQuery = {
        activityName:'',
        activityState:'',
        pageNum:1,
        pageSize:10,
    };
    const defaultListQuery2 = {
        activityId:'',
        activityName:'',
        departmentId:'',
        evaluateState :'',
        userId:'',
        pageNum:1,
        pageSize:10,
    };

    const defaultListQuery3 = {
        activityId:'',
        activityName:'',
        departmentId:'',
        isDepartManage :'',
        userId:'',
        isHasSelfInput:'',
        pageNum:1,
        pageSize:10,
    };

    const defaultListQuery4 = {
        activityId:'',
        pageNum:1,
        pageSize:10,
    };

    const defaultAddForm = {
        activityName:'',
        itemList:[],
        logList:[]

    };
    export default {
        name: "index",
        data(){
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                listQuery2:JSON.parse(JSON.stringify(defaultListQuery2)),
                list2:[],
                count2:0,
                loading2:false,

                listQuery3:JSON.parse(JSON.stringify(defaultListQuery3)),
                list3:[],
                count3:0,
                loading3:false,

                userOptionList:[],
                typeList2:[{name:'待投票',code:0},{name:'已投票',code:10},{name:'弃权',code:20}],
                activeName:'second',

                activityId:this.$route.query.activityId,
                info:{},
                data2:[],
                dialogVisible:false,
                form:JSON.parse(JSON.stringify(defaultAddForm)),

                listQuery4:JSON.parse(JSON.stringify(defaultListQuery4)),
                list4:[],
                loading4:false,
                btnloading:false


            }
        },
        computed: {
          ...mapGetters([
            'name',
            'mobile',
            'userId'
          ]),

        },
        created() {
            this.listQuery2.activityId = this.$route.query.activityId;
            this.listQuery3.activityId = this.$route.query.activityId;
            this.getInfo();
            this.getList2();
            this.getList3();
            this.getList4();
            this.getUserOptionList();
            // this.getBuMenList();
            this.getDataList2();
        },
        filters: {
          fifState(val) {
               if(val == 0 ){
                 return '未开始'
               }else if(val == 10){
                 return '已取消'
               }else if(val == 20){
                 return '进行中'
               }else if(val == 30){
                 return '已结束'
               }
            },
        },
        methods:{
            //下载excle
            downloadExcel(){
                let data = JSON.parse(JSON.stringify(this.listQuery4));
                data.activityId = this.activityId;
                data.isExport = 1;
                this.btnloading = true;
                evaluateSummary(data).then((res)=>{
                    this.btnloading = false;
                    require.ensure([], () => {
                        const { export_json_to_excel } = require('sheet/Export2Excel');
                        const tHeader = res.title;
                        const filterVal = res.columns;
                        const list = res.list;
                        const data = this.formatJson(filterVal, list);
                        export_json_to_excel(tHeader, data, res.fileName);
                    })
                }).catch(()=>{
                    this.btnloading = false;
                })
            },

            //下载表格数据格式化
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            },

            //去员工投票页
            toStaffAct(item){
                let routeData = this.$router.resolve({name:'staffActivity',query:{eId:item.eId}});
                window.open(routeData.href);
            },
            //显示自评
            seeZp(item){
                this.dialogVisible = true;
                selfEvaluateInfo({auId:item.auId}).then((res)=>{
                    this.form.itemList = res.itemList;
                    this.form.logList = res.logList;
                })
            },

            //关闭自评
            handleClose(){
                this.dialogVisible = false;
            },

            //获取员工下拉选项
            getDataList2(){
                listByDept().then((res)=>{
                    this.data2 = [];
                    this.data2 = this.forTree2(res);
                })
            },

            //去除children.length = 0 的项
            forTree2(list){
                let newList = list;
                if(newList.length){
                    for (let i = 0; i<newList.length; i++){
                        if(newList[i].children && newList[i].children.length > 0){
                            this.forTree2(newList[i].children)
                        }else if(newList[i].children && newList[i].children.length == 0){
                            console.log("newList[i]",newList[i])
                            delete newList[i];
                        }
                    }
                    return newList
                }
            },

            //获取部门列表
            getBuMenList(){
                getDeptList().then((res)=>{
                    this.data2 = [];
                    this.data2 = this.forTree(res);
                })
            },
            //去除不要的children
            forTree(list){
                let newList = list;
                if(newList.length){
                    for (let i = 0; i<newList.length; i++){
                        if(newList[i].children && newList[i].children.length > 0){
                            this.forTree(newList[i].children)
                        }else{
                            delete newList[i].children;
                        }
                    }
                    return newList
                }
            },

            //获取员工下拉选项
            getUserOptionList(){
                getUserOption().then((res)=>{
                    this.userOptionList = res;
                })
            },

            getInfo(){
                activityInfo({activityId:this.activityId}).then((res)=>{
                    this.info = res;
                })
            },

          handleClick(){

          },

            handleSearchList2(){
                this.listQuery2.pageNum = 1;
                this.getList2();
            },

            //获取活动列表
            getList2(){
                this.loading2 = true;
                let data = JSON.parse(JSON.stringify(this.listQuery2));
                activityEvaluator(data).then((res)=>{
                    this.list2 = res.list;
                    this.count2 = res.count;
                    this.loading2 = false;
                }).catch(()=>{
                    this.loading2 = false;
                })
            },

            handleSizeChange2(val){
                this.listQuery2.pageNum = 1;
                this.listQuery2.pageSize = val;
                this.getList2();
            },
            handleCurrentChange2(val){
                this.listQuery2.pageNum = val;
                this.getList2();
            },


            handleSearchList3(){
                this.listQuery3.pageNum = 1;
                this.getList3();
            },

            //获取活动列表
            getList3(){
                this.loading3 = true;
                let data = JSON.parse(JSON.stringify(this.listQuery3));
                evaluateAnalysis(data).then((res)=>{
                    this.list3 = res.list;
                    this.count3 = res.count;
                    this.loading3 = false;
                }).catch(()=>{
                    this.loading3 = false;
                })
            },

            handleSizeChange3(val){
                this.listQuery3.pageNum = 1;
                this.listQuery3.pageSize = val;
                this.getList3();
            },
            handleCurrentChange3(val){
                this.listQuery3.pageNum = val;
                this.getList3();
            },



            //获取活动列表
            getList4(){
                this.loading4 = true;
                let data = JSON.parse(JSON.stringify(this.listQuery4));
                data.activityId = this.activityId;
                evaluateSummary(data).then((res)=>{
                    this.list4 = res;
                    this.loading4 = false;
                }).catch(()=>{
                    this.loading4 = false;
                })
            },






        },
    }
</script>

<style scoped lang="scss">
  .avatar-uploader{
    margin-bottom:10px;
    display: inline-block;
    width:80px;
    height:80px;
    border:1px solid #DCDFE6;
    text-align: center;
    line-height: 80px;
  }
</style>
